<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识标签(第一部分)</title>
    <style>
        span{
            color: red;
        }
    </style>
</head>
<body>
    <h1>了不起的盖茨比</h1>
    <p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，<strong>股票</strong>飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。<br/>他以诗人的敏感和戏剧家的想象为<strong>"爵士乐时代"</strong>吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。<q>聪明秀出为之英，胆略过人为之雄。</q></p>
    <hr/>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <hr/>
    <blockquote>明月出天山，苍茫云海间。<br/>长风几万里，吹度玉门关。<br/>汉下白登道，胡窥青海湾。<br/>由来征战地，不见有人还。<br/>戍客望边色，思归多苦颜。<br/>高楼当此夜，叹息未应闲。</blockquote>
    <address>北京市西城区德外大街10号</address>

    <pre>
        <meta charset="UTF-8">
        <title>了不起的盖茨比</title>
        <style>
        span{
            color: red;
        }
        </style>
    </pre>
</body>
</html>

<!--段落用<p>标签-->
<!--h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级-->

<!--加入强调语气，使用<strong>和<em>标签-->
<!--有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。-->
<!--但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。两个标签相比，目前国内前端程序员更喜欢使用<strong>表示强调。-->
            <!--语法：-->
<!--<em>需要强调的文本</em>-->
<!--<strong>需要强调的文本</strong>-->
<!--<em>的内容在浏览中显示为斜体，<strong>显示为加粗。如果不喜欢这种样式，没有关系，以后可以使用css样式去改变它。-->

<!--使用<span>标签为文字设置单独样式-->
<!--<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。-->
<!--如果现在我们想把上一小节的第一段话“美国梦”三个字设置成blue（蓝色），但注意不是为了强调“美国梦”，而只是想为它设置和其它文字不同的样式（并不想让屏幕阅读器对“美国梦”这三个字加重音读出），所以这样情况下就可以用到<span>标签了。-->
<!--如下面例子：-->
<!--<p>1922年的春天，一个想要成名名叫<em>尼克•卡拉威</em>（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，<strong>股票</strong>飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>-->
<!--语法：-->
<!--<span>文本</span>-->

<!--<q>标签，短文本引用-->
<!--想在你的html中加一段引用吗？比如在你的网页的文章里想引用某个作家的一句诗，这样会使你的文章更加出彩，那么<q>标签是你所需要的。-->
<!--语法：-->
<!--<q>引用文本</q>-->

<!--<blockquote>标签，长文本引用-->
<!--<blockquote>的作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。-->
<!--等等，上一节<q>标签不是也是对文本的引用吗？不要忘记<q>标签是对简短文本的引用，比如说引用一句话就用到<q>标签。-->
<!--如想在我的文章中引用李白《关山月》中的诗句，因为引用文本比较长，所以使用<blockquote>。-->
<!--语法:-->
<!--<blockquote>引用文本</blockquote>-->
<!--如下面例子：-->
<!--<blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>-->

<!--使用<br>标签分行显示文本-->
<!--怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<br />标签了，在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。-->

<!--为你的网页中添加一些空格-->
<!--我们已经讲解过在html代码中输入空格、回车都是没有作用的。要想输入空格，必须写入&nbsp;。-->
<!--语法：-->
<!--&nbsp;-->

<!--认识<hr>标签，添加水平横线-->
<!--在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。如下图所示：-->
<!--语法：-->
<!--html4.01版本 <hr>-->
<!--xhtml1.0版本 <hr />-->
<!--大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。-->

<!--<address>标签，为网页加入地址信息-->
<!--一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。-->
<!--语法：-->
<!--<address>联系地址信息</address>-->
<!--如：-->
<!--<address>文档编写：lilian 北京市西城区德外大街10号</address>-->
<!--<address>-->
<!--本文的作者：<a href="mailto:lilian@imooc.com">lilian</a>-->
<!--</address>-->
<!--在浏览器上显示的样式为斜体，如果不喜欢斜体，当然可以，可以在后面的课程中使用 css 样式来修改它<address>标签的默认样式。-->

<!--使用<code>标签-->
<!--在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：-->
<!--<code>var i=i+300;</code>-->
<!--注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。-->
<!--语法：-->

<!--<code>代码语言</code>-->
<!--注：如果是多行代码，可以使用<pre>标签。-->

<!--使用<pre>标签为你的网页加入大段代码-->
<!--在上节中介绍加入一行代码的标签为<code>，但是在大多数情况下是需要加入大段代码的，如下图：-->
<!--怎么办？不会是每一代码都加入一个<code>标签吧，没有这么复杂，这时候就可以使用<pre>标签。-->
<!--语法：-->
<!--<pre>语言代码段</pre>-->
<!--<pre> 标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。-->
